<template>
  <!-- 验收详情 -->
  <div>
    <div class="ccui-navigation">
      <el-button
        size="mini"
        type="primary-icon-medium"
        icon="icon-ccui-return"
        @click="handleBack"
        >返回</el-button
      >
      <div class="ccui-navigation-divider" />
      <!-- 面包屑 -->
      <el-breadcrumb
        class="ccui-navigation-crumbs-container"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item
          :to="{ path: $store.getters.getBreadcrumb('level1').path }"
          >供应链管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkmanagement' }"
          >验收管理</el-breadcrumb-item
        >
        <el-breadcrumb-item :to="{ path: '/checkManagement/materialRentManage/list' }"
          >物资租赁验收管理</el-breadcrumb-item
        >
        <el-breadcrumb-item
          :to="{ path: '/checkManagement/materialRentAcceptanceAccount/list' }"
          ><span>验收台账</span></el-breadcrumb-item
        >
        <el-breadcrumb-item>
          <span>查看</span>
          <span class="ccui-curr-crumb ccui-ml-10">{{
            acceptanceCertBO.acceptanceName
          }}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- tab切换 -->
    <div class="ccui-app-container-detail2">
      <div class="center-information ccui-app-container-detail-body">
        <el-tabs v-model="activeName" class="el-tabs__customize">
          <el-tab-pane label="基本信息" name="first">
            <!-- 基本信息 -->
            <base-info :fromData="acceptanceCertBO" />
          </el-tab-pane>
          <el-tab-pane label="采购清单" name="second">
            <!-- 采购清单 -->
            <inventory :listData="acceptanceBillBOList" />
          </el-tab-pane>
          <el-tab-pane label="附件信息" name="third">
            <!-- 附件信息 -->
            <update v-if="isTrue" :fileArrs="fileList" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!--  底部导航栏及签名导出  -->
    <div class="footer">
      <bottomGuide
        busiType="102"
        approvalStatus="approvaled"
        exportMethod="get"
        methodGetPageType="exportAcceptanceOrder"
        :curPageId="$route.query.id"
        :businessCode="businessCode"
        @handleBack="handleBack"
      />
    </div>
  </div>
</template>

<script>
import baseInfo from "../common/components/baseInfo.vue";
import inventory from "../common/components/inventory.vue";
import update from "../common/components/update.vue";
import publicComponent from "@/basa/components/public";
import { getAcceptanceCert } from "../common/api/index";

export default {
  data() {
    return {
      activeName: "first",
      businessCode: "",
      acceptanceCertBO: {},
      acceptanceBillBOList: [],
      fileList: [],
      isTrue: false
    };
  },
  components: {
    baseInfo,
    inventory,
    update,
    bottomGuide: publicComponent.bottomGuide
  },
  activated() {
    this.views();
  },
  methods: {
    // 详情查看
    views() {
      getAcceptanceCert({ id: this.$route.query.id }).then(res => {
        const {
          acceptanceCertBO,
          acceptanceBillBOList,
          otherFiles,
          sceneFiles
        } = res.data.data;
        this.acceptanceCertBO = acceptanceCertBO;
        // 验收地点
        acceptanceBillBOList.forEach(item => {
          item.qingdanId = item.materialId;
          // 验收日期ie回显
          item.acceptanceDate = new Date(
            item.acceptanceDate.replace(/-/g, "/")
          ).getTime();
          // 验收地点
          item.province = item.provinceCode;
          item.city = item.cityCode;
          item.county = item.countyCode;

          // 拼接地址
          item.testdaohuo =
            item.areaName +
            item.provinceName +
            item.cityName +
            item.countyName +
            item.acceptancePlace;
        });

        this.acceptanceBillBOList = acceptanceBillBOList;
        let updateList = [...sceneFiles, ...otherFiles];
        updateList.forEach(item => {
          new Date(item.uploadTime.replace(/-/g, "/")).getTime();
        });
        updateList.sort((a, b) => {
          return a.sn - b.sn;
        });
        console.log(updateList);
        this.fileList = updateList;
        this.isTrue = true;
      });
    },
    // 返回
    handleBack() {
      this.$router.push({
        path: "/checkManagement/materialRentAcceptanceAccount/list"
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.footer {
  margin-top: 60px;
}
</style>
